<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
        //以后所有data的书写要写成一个函数,函数返回一个数据对象

            data(){
                return{
                    msg:"hello",
                }
            }
        })

        //1..data为什么写成函数(data写成对象的缺点如下:)
      //1.声明data(模拟这个是某个组件的data)
      const data1 = {
        name:"lall",
        age:111
      };
      //当组件复用的时候,很多地方都要对data操作

    const data1_one = data1;
    const data1_two = data1;

    // 在主键1中修改了data1
    // 因为data1_one data1_two data1 地址都是一样的，只要修改1个，则其他的全部会发生变化
    // 所以我们不会把组件中的data写成对象，否者组件之间的data会互相影响
    data1_one.age = 20;

    // 2  data 为什么写成函数（data携程函数如下：）
    function data2(){
        const o = {
            name:"xdad",
            age:111,
        }
        return 0
    }

    // 当主见被复用的时候，需要拿到data2中的数据，则需要调用data2函数
    // 每次data2函数的调用，都会创建一个新的对象，所以组件之间的data是不会互相影响的
    const data2_one = data2();
    const data2_two = data2();
    </script>
</body>
</html>